<template>
  <div class="change-password-page">
    <div
      class="header"
      v-if="!successVisible"
    >
      <h1 class="title">修改密码</h1>
      <p class="subtitle">为了账户安全，请定期更换密码</p>
    </div>

    <a-form
      :model="form"
      :rules="rules"
      layout="vertical"
      @finish="handleSubmit"
      class="password-form"
      v-if="!successVisible"
    >
      <a-form-item
        label="旧密码"
        name="oldPassword"
      >
        <a-input-password
          v-model:value="form.oldPassword"
          placeholder="请输入当前密码"
          size="large"
        >
          <template #prefix>
            <lock-outlined />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item
        label="新密码"
        name="newPassword"
      >
        <a-input-password
          v-model:value="form.newPassword"
          placeholder="8-20位字母、数字组合"
          size="large"
        >
          <template #prefix>
            <lock-outlined />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item
        label="确认新密码"
        name="confirmPassword"
      >
        <a-input-password
          v-model:value="form.confirmPassword"
          placeholder="请再次输入新密码"
          size="large"
        >
          <template #prefix>
            <lock-outlined />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-button
          type="primary"
          html-type="submit"
          :loading="submitting"
          size="large"
          block
        >
          提交修改
        </a-button>
      </a-form-item>
    </a-form>

    <transition name="fade">
      <a-result
        v-if="successVisible"
        status="success"
        title="密码修改成功！"
        sub-title="即将跳转到安全设置页面"
        class="success-result"
      >
        <template #icon>
          <check-circle-filled class="success-icon" />
        </template>
      </a-result>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { LockOutlined, CheckCircleFilled } from '@ant-design/icons-vue'
import { modifyPassword } from '@/api/user'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const router = useRouter()
const submitting = ref(false)
const successVisible = ref(false)

const form = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validatePass = async (_rule: any, value: string) => {
  if (value === '') {
    return Promise.reject('请输入新密码')
  }
  if (!/^(?=.*[a-zA-Z])(?=.*\d).{8,20}$/.test(value)) {
    return Promise.reject('8-20位字母和数字组合')
  }
  if (form.oldPassword && value === form.oldPassword) {
    return Promise.reject('新密码不能与旧密码相同')
  }
  return Promise.resolve()
}

const validateConfirm = async (_rule: any, value: string) => {
  if (value === '') {
    return Promise.reject('请确认新密码')
  }
  if (value !== form.newPassword) {
    return Promise.reject('两次输入的密码不一致')
  }
  return Promise.resolve()
}

const rules = reactive({
  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  newPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
  confirmPassword: [{ required: true, validator: validateConfirm, trigger: 'change' }]
})

const handleSubmit = async () => {
  submitting.value = true
  try {
    await modifyPassword(form)

    successVisible.value = true
    message.success('密码修改成功，请重新登录')
    await userStore.logout()
    setTimeout(() => {
      // 刷新
      window.location.reload()
    }, 2000)
  } catch (error) {
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.change-password-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 24px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 8px;
}

.subtitle {
  color: rgba(0, 0, 0, 0.45);
}

.password-form {
  max-width: 400px;
  margin: 0 auto;
}

.success-result {
  margin-top: 40px;
}

.success-icon {
  font-size: 64px;
  color: #52c41a;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.ant-input-affix-wrapper {
  border-radius: 6px;
}

.ant-btn {
  border-radius: 6px;
  height: 48px;
  font-size: 16px;
}
</style>
